import React, { PropTypes } from 'react';
import style from './index.less'
import { helper } from '../../utils';

import  "../../utils/orgchart/jquery.orgchart.js"

/**
 * [Nodes 节点]
 */
const Nodes=({title,value})=>(
  <span>
    <strong style={{display:'block',color:'#4a4a4a'}}>{title}</strong>
    <em style={value.indexOf('-')===-1?{color:'#d0021b'}:{color:'#7ed321'}}>{value}</em>
  </span>
)

/**
 * [TheTree 组织结构图]
 */
class TheTree extends React.Component {
  state = {
    data: helper.arrayToTree(this.props.data, 'id', 'pid'),
  }

  componentDidMount(){
    $("#organisation").orgChart({
        container: $("#main")
    });
  }
  componentWillReceiveProps(nextProps) {
    if(nextProps.data!==this.props.data){
      this.setState({
        data:helper.arrayToTree(nextProps.data, 'id', 'pid'),
      })
      $("#organisation").orgChart({
        container: $("#main")
      })
    }
  }
  // componentWillUpdate(){
  //   $("#organisation").orgChart({
  //     container: $("#main")
  // });
  // }
  getChild(data){
      return(
          <ul>
              {
                  data.map((item,i)=>(
                <li key={i}>
                    <Nodes title={item.title} value={item.value} />
                    {
                        item.children?this.getChild(item.children):null
                    }
                </li>
                  ))
              }
          </ul>
      )
  }

  
  render() {
    const {  data } = this.state    
    console.log(8701,data);
    

    return (
        <div className={style.org}>
            <ul id="organisation">
                <li>
                    <Nodes title={data[0].title} value={data[0].value} />
                    {
                        data[0].children?this.getChild(data[0].children):null
                    }
                </li>
            </ul>
            <div id="main">
            </div>
        </div>
    ) 
  }
}
TheTree.defaultProps = {
  data:  [
          {
            id:'gpsy',  
            title:'股票收益',
            value:'0',
            pid:null, 
          },
          {
            id:'jzsy',  
            title:'基准收益',
            value:'0',
            pid:'gpsy', 
          },
          {
            id:'cesy',  
            title:'超额收益',
            value:'0',
            pid:'gpsy', 
          },
          {
            id:'zcpz',  
            title:'资产配置',
            value:'0',
            pid:'cesy', 
          },
          {
            id:'ggxz',  
            title:'个股选择',
            value:'0',
            pid:'cesy', 
          },
          {
            id:'jhsy',  
            title:'交互收益',
            value:'0',
            pid:'cesy', 
          }
      ]
  

}


export default TheTree
